Free Shipping is a popular feature and it’s a great way to encourage customers to purchase more items from your store.  But it’s not always clear to the customer that it’s an option, or how much they need to purchase before it activates.

Add $5.00 for FREE shipping!

ShopSite’s javascript variables are always available on the shopping cart screen, so by using the “ss_subtotal” variable with a few lines of javascript code we can automatically display a message telling customers how much they need to add to their cart.  You can easily set the value for free shipping as well as configure the message that appears.  Here is some sample code:

<script language="javascript" type="text/javascript">
 free_limit = 50.00;
 amount_left_tmp = free_limit - ss_subtotal;
 amount_left = amount_left_tmp.toFixed(2);
 if (amount_left > 0){document.write('Add $' + amount_left + ' for FREE shipping!');}
</script>

Notes:

– On ShopSite’s Commerce > Shipping screen, enable “Free Shipping”, set “use Subtotal Total” on (default), and fill in the “Minimum Amount” field.
– Set the “free_limit” variable in the code to the same amount you entered in ShopSite’s “Minimum Amount” field.
– Change the “Add $’ + amount_left + ‘ for FREE shipping” text to any other message you prefer, but be sure to leave the ‘ + amount_left + ‘  part (with the single quotes) in place where you want the amount to appear.

Add The Script

That’s the whole script, now you just need to place it where you want the message to appear.  This can be done by editing your shopping cart template, or you could test it by just adding the code to the Commerce Setup > Order System > Shopping Cart > “Text at the top of the Shopping Cart screen” field.

Most templates will display that field on the Shopping Cart screen.

For a working sample, click here to add a product to our demo store and as long as there is less than $500 in the cart the message will show you how much you need to add to receive free shipping.

As you add more products to the cart the message will automatically update and once you place over $500 in the cart the message will disappear.

Advanced Options

The script above will not work on regular category or product pages, as the javascript variables are only available to the shopping cart.  However this doesn’t mean it can’t be modified to display there.  The shopping cart details are stored as a cookie by the browser, so additional javascript could be implemented to read in the cookie and obtain the subtotal.  ShopSite’s sample code for their mini cart feature could be used as a basis for
creating an advanced version of the code:

http://shopsite.com/help/11.2/en-US/install/minicart.examples1.html

Multiple Countries
Do you ship to multiple countries but only offer free shipping to the US?  Thanks to Michael K. from CrystalClassics.com who sent us his code as an example, below is a modified version of the script which checks the value of the Country field and only displays the “Add $ for Free Shipping” message if US is selected.

<script language="javascript" type="text/javascript">
free_limit = 50.00;
amount_left_tmp = free_limit - ss_subtotal;
amount_left = amount_left_tmp.toFixed(2);

if (amount_left > 0){document.write('<span id="free_ship_msg"><strong>Add $' + amount_left + ' for FREE shipping!<br><br></strong> (Contiguous U.S. Only)</span>');}
ss_jQuery(document).ready(function() {
   if (ss_jQuery('.zipncountry select').val() == 'US') ss_jQuery('#free_ship_msg').show();
   else ss_jQuery('#free_ship_msg').hide();
   ss_jQuery('.zipncountry select').change(function() {
     if (ss_jQuery('.zipncountry select').val() == 'US') ss_jQuery('#free_ship_msg').show();
     else ss_jQuery('#free_ship_msg').hide();
     });
});
</script>

…

That’s all there is to it – just a few lines of code and you’re promoting your free shipping option.  You don’t have to stop there either – you can modify the code to add colors, graphics, or anything you like to make the message stand out and help give your customers an urge to buy more from your store.